<template>
  <div class="app-container">
    <h4>故障信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
        <tr>
          <th width="15%">隐患类型</th>
          <td width="35%">
            <b v-if="hitchInfo.hiddenType == 0">通讯故障</b>
            <b v-if="hitchInfo.hiddenType == 1">网关故障</b>
            <b v-if="hitchInfo.hiddenType == 2">配件故障</b>
          </td>
          <th width="15%">充电站点</th>
          <td width="35%">{{ hitchInfo.addressSite }}</td>
        </tr>
        <tr>
          <th>充电桩型号</th>
          <td>{{ hitchInfo.chargingpileType }}</td>
          <th>充电枪编号</th>
          <td>
            {{ hitchInfo.number }}
          </td>
        </tr>
        <tr>
          <th>发生时间</th>
          <td>{{ hitchInfo.regTime }}</td>
          <th>详细地点</th>
          <td>
            <b>{{ hitchInfo.address }}</b>
          </td>
        </tr>
        <tr>
          <th>紧急程度</th>
          <td>
            <b v-if="hitchInfo.rank == 0">最高级</b>
            <b v-if="hitchInfo.rank == 1">高急</b>
            <b v-if="hitchInfo.rank == 2">中急</b>
            <b v-if="hitchInfo.rank == 3">低级</b>
          </td>
          <th>状态</th>
          <td>
            <b v-if="hitchInfo.status == 0">登记</b>
            <b v-if="hitchInfo.status == 1">已派单</b>
            <b v-if="hitchInfo.status == 2">未处理</b>
            <b v-if="hitchInfo.status == 3">处理中</b>
            <b v-if="hitchInfo.status == 4">已处理</b>
            <b v-if="hitchInfo.status == 5">已完成</b>
          </td>
        </tr>
        <tr>
          <th>隐患内容</th>
          <td colspan="3">{{ hitchInfo.content }}</td>
        </tr>
        <tr>
          <th>资料附件</th>
          <td colspan="3">
            <b>
              <el-image
                style="width: 150px"
                :src="hitchInfo.hiddenImg"
                :preview-src-list="[hitchInfo.hiddenImg]"
              />
            </b>
          </td>
        </tr>
        <tr>
          <th>处理人</th>
          <td>
            <b>{{ hitchInfo.personName }}</b>
          </td>
          <th>预计完成时间</th>
          <td>
            <b>{{ hitchInfo.estimate }}</b>
          </td>
        </tr>
        <tr>
          <th>任务内容</th>
          <td colspan="3">
            <b>{{ hitchInfo.assContent }}</b>
          </td>
        </tr>
      </tbody>
    </table>
    <el-row style="text-align: center; margin-top: 40px">
      <el-button @click="back">返回</el-button>
    </el-row>
  </div>
</template>
<script>
import '@/styles/show.css'
import hitchDeal from '@/api/charging-pile/hidden_manage'

export default {
  data() {
    return {
      hitchInfo: {},
      //dealInfo:{},
      // lendItemList: [], //投资列表
      // lendReturnList: [], //还款计划列表
      //dealRank:0,
    }
  },

  created() {
    // console.log(this.$route.params.id);
    // console.log(this.$route.params.rank);
    if (this.$route.params.id) {
      this.fetchDataById()
    }
    if (this.$route.params.status > 2) {
      console.log(111)
    }
    // if (this.$route.params.status > 3) {
    //   this.dealRank = 4;
    //   this.fetchDataDealById()
    // }
  },

  methods: {
    fetchDataById() {
      hitchDeal.fetchDataById(this.$route.params.id).then((res) => {
        console.log(res)
        this.hitchInfo = res.data.hidden
      })
    },
    // fetchDataDealById() {
    //   hitchDeal.fetchDataDealById(this.$route.params.id).then((res) => {
    //     console.log(res)
    //     this.dealInfo = res.data.dealInfo
    //   })
    // },

    back() {
      this.$router.push({ path: '/charging-pile/hidden_manage' })
    },
  },
}
</script>
<style>
body {
  background: url(/static/img/川崎h2.1d055f7a.jpg);
  background-size: 100%;
}
</style>
